<template>
  <div class="gotopay">
    <scroll style="height:100%" :data="cartProduct" ref="scrollDiv">
      <div class="gotopay-bd">
        <h2 class="title">收货地址</h2>
        <div class="panel-group">
          <router-link to="/address_list" class="panel" v-if="addressData">
            <div class="left">
              <div class="contact">
                <span class="name">{{addressData.name}}</span><span class="tel">{{addressData.phone}}</span>
              </div>
              <div class="address">{{addressData.province}}{{addressData.city}}{{addressData.address}}</div>
            </div>
          </router-link>
          <div class="panel" v-else>
            <router-link tag="div" class="left" to="address">
              您还没有填写配送地址请点击添加
            </router-link>
          </div>
        </div>
        <div class="panel-group">
          <div class="panel top product" v-for="item in cartProduct">
            <div class="left">
              <div class="thumb">
                <img :src="item.image" @load="refreshScroll">
              </div>
              <div class="product-info">
                <div class="title">{{item.product_name}}</div>
                <template v-if="cartType==2">
                  <div class="gift">{{item.spec_name}}</div>
                  <div class="gift">预计发货时间: {{item.expect_delivery_time}}</div>
                </template>
              </div>
            </div>
            <div class="right">
              <span class="price">{{itemPrice(item.price, item.quantity) | formatMoney}}</span>
              <span class="num">X{{item.quantity}}</span>
            </div>
          </div>
          <div class="panel">
            <div class="left">运费</div>
            <div class="right">{{confirmationList.delivery_fee | formatMoney}}</div>
          </div>
        </div>
        <div class="panel-group">
          <div class="panel">
            <div class="left">优惠券</div>
            <div class="right flex">
              <div class="main">
                <select v-model="selectedCoupon" class="select" name="coupon" v-if="couponData.length">
                  <option value="">请选择优惠券</option>
                  <option v-for="item in couponData" :value="item.card_no">券号:{{item.card_no}}, 金额:{{item.amount | formatMoney}}</option>
                </select>
                <template v-else>无</template>
              </div>
              <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-next"></use>
            </svg>
            </div>
          </div>
        </div>
      </div>
    </scroll>
    <div class="gotopay-ft">
      <div class="totalPrice">总价: {{totalPrice | formatMoney}}</div>
      <span class="btn btn-red" @click="gotopay" v-if="!disabledPay">去支付</span>
      <span class="btn" v-else>去支付</span>
    </div>
  </div>
</template>

<script>
import $http from '@/api'
import $wxpay from '@/utils/wxpay.js'
import { formatMoney } from '@/utils'
import Scroll from './base/scroll'
export default {
  data () {
    return {
      title: 'e家便利店',
      name: '返回',
      confirmationList: [],
      addressData: false,
      cartProduct: null,
      couponData: [],
      cartType: 1,
      selectedCoupon: null,
      ischeckLoad: false,
      disabledPay: false
    }
  },
  created() {
    let type = this.$route.query.type
    this.cartType = type
    console.log('dddddddddddd')
    $http.getConfirmationList(type)
      .then(res => {
        if (res.code === 0 && !(res.data instanceof Array)) {
          let data = res.data
          this.confirmationList = data
          this.addressData = data.address
          this.cartProduct = data.products
          this.couponData = data.coupon
        } else {
          location.href = '/'
        }
      })
  },
  computed: {
    totalPrice() {
      let price = this.confirmationList.totalPrice
      let couponNum = this.selectedCoupon
      if (couponNum) {
        let result = this.couponData.find(item => {
          return item.card_no === couponNum
        })
        return Number(price) - Number(result.amount)
      } else {
        return price
      }
    }
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    itemPrice(price, quantity) {
      return Number(price) * quantity
    },
    _payParms() {
      let items = []
      for (let item of this.cartProduct) {
        items.push({
          product_id: item.product_id,
          quantity: item.quantity,
          spec_name: item.spec_name
        })
      }
      let data = {
        ...this.addressData,
        card_no: this.selectedCoupon,
        cart_type: this.cartType,
        items: JSON.stringify(items)
      }
      return data
    },
    getConfirmationList() {
      let type = this.$route.query.type
      if (!type) {
        return
      }
      this.cartType = type
      $http.getConfirmationList(type)
      .then(res => {
        if (res.code === 0) {
          let data = res.data
          this.confirmationList = data
          this.addressData = data.address
          this.cartProduct = data.products
          this.couponData = data.coupon
        }
      })
    },
    gotopay() {
      if (!this._payParms().address) {
        location.href = '/address'
      }
      this.disabledPay = true
      $http.getConfirmationCreate(this._payParms())
      .then(res => {
        if (res.code === 0) {
          if (res.payment_status === 1) {
            location.href = '/payment_status?order_id=' + res.order_id
          } else {
            $wxpay.payAjax(res.data.order_id)
            // console.log('跳转微信支付了')
          }
        } else {
          this.$layer.toast({
            content: '订单创建失败，请稍后再试~',
            time: 2000
          })
        }
      })
    },
    refreshScroll() {
      if (!this.ischeckLoad) {
        this.$refs.scrollDiv.refresh()
        this.ischeckLoad = true
      }
    }
  },
  filters: {
    formatMoney(number) {
      return formatMoney(number, '￥')
    }
  },
  watch: {
    $route: function() {
      this.disabledPay = false
      this.getConfirmationList()
    }
  },
  components: {
    Scroll
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only  -->
<style lang="scss" scoped>
  @import '~@/assets/styles/gotopay';
</style>
